<template>
  <div class="seat-selector">
    <div v-for="(row, rowIndex) in seatMap" :key="rowIndex" class="seat-row">
      <div
        v-for="(seat, seatIndex) in row"
        :key="seatIndex"
        class="seat"
        :class="{ selected: filterSeat(seat).selected}"
        @click="toggleSeat(rowIndex, seatIndex)"
      >
        {{ filterSeat(seat)?.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
/* const props = defineProps({
  floor: {
    type: String,
    default: "1",
  },
}); */
// 定义座位号规则
const seatMap: string[][] = [
  ['2-1-1', '2-1-2', '2-1-3', '2-1-4'],
  ['2-2-1', '2-2-2', '2-2-3', '2-2-4'],
  ['2-3-1', '2-3-2', '2-3-3', '2-3-4']
];

// 座位状态接口
interface Seat {
  label: string;
  selected: boolean;
  occupied: boolean;
}

// 初始化座位状态
const seats = ref<Seat[]>([]);

// 创建座位状态
for (let i = 0; i < seatMap.length; i++) {
  for (let j = 0; j < seatMap[i].length; j++) {
    seats.value.push({
      label: seatMap[i][j],
      selected: false,
      occupied: false
    });
  }
}
const filterSeat = (seat: string): any => {
  let find = seats.value.find(s => s.label === seat);
  return find
};

// 点击座位时切换选中状态
const toggleSeat = (rowIndex: number, seatIndex: number): void => {
  const seat = seats.value[rowIndex * seatMap[0].length + seatIndex];
  seat.selected = !seat.selected;
  console.log('sss',seat.label, seat.selected);
  
};

defineExpose({
  // setData,
});
</script>

<style scoped>
.seat-selector {
  display: flex;
  flex-direction: column;
}

.seat-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.seat {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-right: 10px;
  background-color: #eaeaea;
  cursor: pointer;
}

.selected {
  background-color: #1890ff;
  color: #fff;
}

.occupied {
  background-color: #ff4d4f;
  cursor: not-allowed;
}
</style>